<template>
  <div>
    <!--      侧边栏-->
    <el-container>
      <el-aside style="width:200px; background-color:#001529">
        <div style="height: 60px;line-height: 60px;color: rgba(255,255,255,0.62);
        display: flex;align-items: center;justify-content: center;">
          <!--      将元素设置为 Flex 容器，开启弹性布局,水平垂直居中    -->
          <span style=" font-size: 25px;">文档管理系统</span>
        </div>
        <el-menu router default-active="$route.path" background-color="#001529"
                 text-color="rgba(255,255,255,0.62)" >
          <el-menu-item index="/">
            <template slot="title">
              <!-- 菜单图标（Element UI 内置图标） -->
              <i class="el-icon-s-home"></i>
              <!-- 菜单标题文本 -->
              <span>系统首页</span>
            </template>
          </el-menu-item>
        </el-menu>
        <!--          二级菜单-->
        <el-menu background-color="#001529" text-color="rgba(255,255,255,0.62)" router default-active="$route.path">
          <!--          文档信息-->
          <el-submenu>
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>文档信息</span>
            </template>
            <el-menu-item index="/Upload">文档录入</el-menu-item>
            <el-menu-item index="/Report">报表生成</el-menu-item>
          </el-submenu>
        </el-menu>
        <el-menu background-color="#001529" text-color="rgba(255,255,255,0.62)" router default-active="$route.path">
          <!--          文档管理-->
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>文档管理</span>
            </template>
            <el-menu-item index="/Type1">文档类型一</el-menu-item>
            <el-menu-item index="/Type2">文档类型二</el-menu-item>
          </el-submenu>
        </el-menu>
        <el-menu background-color="#001529" text-color="rgba(255,255,255,0.62)" router default-active="$route.path">
          <!--          个人中心-->
          <el-submenu>
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item>修改密码</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <!--            面包屑-->
          <el-card style="height: 60px;display: flex;align-items: center; width: 1000px;justify-content: center;margin-top: 15px">
            <el-breadcrumb separator-class="el-icon-arrow-right" >
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/document' }">文档信息</el-breadcrumb-item>
            </el-breadcrumb>
            <!--            下拉菜单-->
            <div style="margin-left: 860px;margin-top: -25px">
              <el-dropdown placement="bottom">
                <div style="display: flex;align-items: center;">
                  <span style="margin-left: 10px">用户1</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item @click="">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-card>
        </el-header>
        <el-main>
          <el-card style="width: 1000px;height: 780px;display: flex;align-items: center; justify-content: center">
             <div>
               <el-table :data="fileList">
                 <el-table-column label="文件ID" prop="file_id"></el-table-column>
                 <el-table-column label="文件名称" prop="file_name"></el-table-column>
                 <el-table-column label="文件类型" prop="file_type"></el-table-column>
                 <el-table-column label="附件"></el-table-column>
                 <el-table-column
                     fixed="right"
                     label="操作"
                     width="100">
                   <template slot-scope="scope">
                     <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                     <el-button type="text" size="small">编辑</el-button>
                   </template>
                 </el-table-column>
               </el-table>
             </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>



  </div>
</template>

<script>


import axios from "axios";

export default {
  data(){
    return{
      fileList:[]
    }
  },


}
</script>

<style>
.el-menu--inline .el-menu-item{
  background-color: #000c17 !important;
}
.el-menu-item:hover,.el-submenu__title:hover{
  color: #fff !important;
}
.el-submenu:hover i{
  color: #fff !important;
}
.el-menu-item:hover i{
  color: #fff !important;
}


.el-breadcrumb{
  margin-top: 20px;
}
.i{
  color: rgba(255,255,255,0.62);
}

</style>
